<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">导航栏</h1>
		</header>
		
		<div class="mui-content" id="divContainer">
			<div class="mui-content-padded">
				<!--<h4 style="text-align: center;" v-html="chapter.title">外篇一 神朝将崩</h4>-->
				<div id="divContent" style="white-space: pre-line; margin-top: 10px; margin-bottom: 50px; " class="mui-row" v-html="chapter.cpContent" >s</div>
			</div>
			
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item" href="#" style="color: blue;" v-on:click="loadPrev()">上一页</a>
				<a class="mui-tab-item" href="#" style="color: blue;"><span v-html="current">2</span>/<span v-html="total">3170</span></a>
				<a class="mui-tab-item" href="#" style="color: blue;" v-on:click="loadNext()">下一页</a>
			</nav>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false, //关闭左滑关闭功能
			});
			function getDefaultData() {
				return {
					"_id": "568fef99adb27bfb4b3a58dc",
					"name": "优质书源",
					"source": "zhuishuvip",
					"book": "548d9c17eb0337ee6df738f5",
					"link": "http://vip.zhuishushenqi.com/toc/568fef99adb27bfb4b3a58dc",
					"chapters": [{
						"title": "第001章    无限期的任务",
						"link": "http://vip.zhuishushenqi.com/chapter/568fef9dadb27bfb4b3a58e3?cv=1556843221009",
						"id": "568fef9dadb27bfb4b3a58e3",
						"time": 0,
						"chapterCover": "",
						"totalpage": 0,
						"partsize": 0,
						"order": 1,
						"currency": 25,
						"unreadble": false,
						"isVip": false
					}, {
						"title": "第002章    美女集团",
						"link": "http://vip.zhuishushenqi.com/chapter/568fef9dadb27bfb4b3a58e6?cv=1553159580674",
						"id": "568fef9dadb27bfb4b3a58e6",
						"time": 0,
						"chapterCover": "",
						"totalpage": 0,
						"partsize": 0,
						"order": 2,
						"currency": 15,
						"unreadble": false,
						"isVip": false
					}],
					"updated": "2019-05-16T00:51:22.462Z",
					"host": "vip.zhuishushenqi.com"
				}
			}
			var vm = new Vue({
				el: '.mui-content',
				data: {
					keyValue:"",
					sourceId:"",
					total:0,
					current:1,
					nextindex:0,
					previndex:0,
					atoc:getDefaultData(),
					chapter:{
						"title":"外篇一 神朝将崩",
						"body":"\n\r\n\r\n\r请安装最新版追书 以便使用优质资源",
						"isVip":false,
						"cpContent":"辰东新书《圣墟》注册了，先占个坑，明天开始上传正文章节。\n\t　　下面的文不是新书内容，是辰东以前写过的一篇武侠短文，放出来给大家看一看。",
						"currency":30,
						"id":"5817f1161bb2ca566b0a5973"
					}
				}
			});
			var self;
			mui.plusReady(function(){
				var divContent = document.getElementById("divContent");
				divContent.innerHTML = "";
				
				self = plus.webview.currentWebview();
				//var title = document.getElementById("title");
				//title.innerHTML = self.title;
				vm.keyValue  = self.keyValue;
				vm.sourceId = self.sourceId;
				plus.nativeUI.showWaiting("正在加载数据，请稍等...");
				mui.getJSON("http://api.zhuishushenqi.com/atoc/"+vm.sourceId+"?view=chapters", {}, function(rsp) {
					plus.nativeUI.closeWaiting();
					console.log(JSON.stringify(rsp));
					if(rsp.ok && rsp.ok == false){
						return;
					}
					vm.atoc = rsp;
					if(vm.atoc && vm.atoc.chapters)
						vm.total = vm.atoc.chapters.length;
					else
						vm.total = 0;
						
					if(vm.total > 0
					&& vm.current >= 1 && vm.current <= vm.total){
						vm.previndex = vm.current-1;
						vm.nextindex = vm.current+1;
						loadContent(vm.atoc.chapters[vm.current -1]);
					}
				});
			});
			// 刷新页面
			function onRefresh(){
				setTimeout(function(){
					loadNext();
				},2000);
			}
			function loadNext(){
				if(vm.nextindex <= 0 || vm.nextindex > vm.total)
				{
					mui.toast("已没有内容！");
					return;
				}
				console.log("nextindex="+vm.nextindex)
				if(vm.total > 0 && vm.nextindex >= 1 && vm.nextindex <= vm.total){
					vm.current = vm.nextindex;
					
					vm.previndex = vm.current-1;
					vm.nextindex = vm.current+1;
					loadContent(vm.atoc.chapters[vm.current -1]);
				}
			}
			function loadPrev(){
				if(vm.previndex <= 0)
				{
					mui.toast("已没有内容！");
					return;
				}
				if(vm.total && vm.previndex >= 1 && vm.previndex <= vm.total){
					vm.current = vm.previndex;
					
					vm.previndex = vm.current-1;
					vm.nextindex = vm.current+1;
					loadContent(vm.atoc.chapters[vm.current -1]);
				}
			}
			function loadContent(chapters){
				var divContent = document.getElementById("divContent");
				divContent.innerHTML = "";
				
				var link = chapters.link;
				plus.nativeUI.showWaiting("正在加载数据，请稍等...");
				/*http://chapterup.zhuishushenqi.com/chapter/http://vip.zhuishushenqi.com/chapter/5817f1161bb2ca566b0a5973?cv=1481275033588*/
				mui.getJSON("http://chapterup.zhuishushenqi.com/chapter/"+link, {}, function(rsp) {
					plus.nativeUI.closeWaiting();
					console.log(JSON.stringify(rsp));
					if(rsp.ok && rsp.ok == false){
						return;
					}
					vm.chapter ={};
					vm.chapter = rsp.chapter;
					var title = document.getElementById("title");
					title.innerHTML = vm.chapter.title;
				});
			}
		</script>
	</body>

</html>